<!--
 * @页面名称:全宗管理
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card fondsManage">
    <splitpanes :dbl-click-splitter="false" style="display: flex; height: 100%; background-color: #ffffff">
      <pane size="15">
        <ztree :setting="treeSetting.setting" :nodes="treeSetting.treeData" @onClick="onClick"></ztree>
      </pane>
      <pane size="85">
        <!-- 按钮操作栏 -->
        <div style="padding-left: 10px; margin-bottom: 10px">
          <el-space>
            <el-dropdown>
              <el-button type="primary">
                全宗编辑
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu style="width: 120px">
                  <el-dropdown-item :disabled="FondsBtnStatus[0]" @click="FondsAdd">新增</el-dropdown-item>
                  <el-dropdown-item :disabled="FondsBtnStatus[1]" @click="FondsEdit">编辑</el-dropdown-item>
                  <el-dropdown-item :disabled="FondsBtnStatus[2]" @click="FondsDel">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-button @click="relevance" :disabled="relevanceStatus">门类关联</el-button>
            <el-dropdown>
              <el-button type="primary">
                归档方式编辑
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu style="width: 120px">
                  <el-dropdown-item :disabled="FMBtnStatus[0]" @click="FMAdd">新增</el-dropdown-item>
                  <el-dropdown-item :disabled="FMBtnStatus[1]" @click="FMEdit">编辑</el-dropdown-item>
                  <el-dropdown-item :disabled="FMBtnStatus[2]" @click="FMDel">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-space>
        </div>
        <div style="height: calc(100% - 40px)">
          <!-- 门类表格 -->
          <div style="height: 50%">
            <stable :border="false" :columns="tableSetting.columns" :data="tableSetting.data" @rowClick="rowClick"></stable>
          </div>
          <!-- 归档方式表格 -->
          <div style="height: 50%">
            <stable :border="false" :columns="tableSetting2.columns" :data="tableSetting2.data" @rowClick="rowClick2"></stable>
          </div>
        </div>
      </pane>
    </splitpanes>
    <!-- 全宗modal -->
    <el-dialog v-model="dialogSetting3.visible" :title="dialogSetting3.title" width="30%" draggable>
      <el-form label-width="90px" :model="formData3" :rules="rules3" ref="formRef3">
        <el-form-item label="全宗名称:" prop="fonds_Name">
          <el-input v-model="formData3.fonds_Name"></el-input>
        </el-form-item>
        <el-form-item label="全宗代码:" prop="Fonds_ArchivalCode">
          <el-input v-model="formData3.Fonds_ArchivalCode"></el-input>
        </el-form-item>
        <el-form-item label="全宗编号:" prop="fonds_Number">
          <el-input v-model="formData3.fonds_Number"></el-input>
        </el-form-item>
        <el-form-item label="顺序号:" prop="fonds_Order">
          <el-input v-model="formData3.fonds_Order"></el-input>
        </el-form-item>
        <el-form-item label="父级全宗:" prop="fonds_Father">
          <el-tree-select
            style="width: 100%"
            check-strictly
            v-model="formData3.fonds_Father"
            node-key="Fonds_ID"
            :props="{ label: 'Fonds_Name', children: 'children' }"
            :data="treeSetting.treeData"
            :render-after-expand="false"
          />
        </el-form-item>
        <el-form-item label="级别:" prop="fonds_Level">
          <el-input v-model="formData3.fonds_Level"></el-input>
        </el-form-item>
        <el-form-item label="备注:" prop="fonds_Remark">
          <el-input v-model="formData3.fonds_Remark" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="闭合图片:" prop="fonds_Icon1">
              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="onChange">
                <img v-if="formData3.fonds_Icon1" :src="formData3.fonds_Icon1" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="展开图片:" prop="fonds_Icon2">
              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="onChange2">
                <img v-if="formData3.fonds_Icon2" :src="formData3.fonds_Icon2" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="upload-btn" :span="8">
            <el-button type="primary" @click="triggerFileSelect('org')">上传组织机构</el-button>
            <div class="file-name">{{ fileNames.orgName }}</div>
          </el-col>
          <el-col class="upload-btn" :span="8" @click="triggerFileSelect('mile')">
            <el-button type="primary">上传大事记</el-button>
            <div class="file-name">{{ fileNames.mileName }}</div>
          </el-col>
          <el-col class="upload-btn" :span="8" @click="triggerFileSelect('fond')">
            <el-button type="primary">上传全宗介绍</el-button>
            <div class="file-name">{{ fileNames.fondName }}</div>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogSetting3.visible = false">取消</el-button>
          <el-button type="primary" @click="handle3"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 门类关联modal -->
    <el-dialog v-model="dialogSetting.visible" :title="dialogSetting.title" width="50%" draggable>
      <stable
        height="400"
        :columns="tableSetting3.columns"
        :data="tableSetting3.data"
        :checkboxConfig="{ checkField: 'checked', trigger: 'row' }"
        @selectionChange="onSelectChange"
      ></stable>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogSetting.visible = false">取消</el-button>
          <el-button type="primary" @click="handle"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 归档方式数据modal -->
    <el-dialog v-model="dialogSetting2.visible" :title="dialogSetting2.title" width="45%" draggable>
      <el-form label-width="120px" :model="formData" :rules="rules" ref="formRef">
        <el-row>
          <el-col :span="11">
            <el-form-item label="中文名称:" prop="FM_OCName">
              <el-input v-model="formData.FM_OCName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="英文名称:" prop="FM_OEName">
              <el-input v-model="formData.FM_OEName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="顺序号:" prop="FM_Index">
              <el-input v-model="formData.FM_Index"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="分类方案:">
              <el-button :disabled="dialogSetting2.title !== '修改'" @click="uploadClick" style="width: 100%">
                <el-icon class="el-icon--right"><Upload /></el-icon>
                {{ uploadPath ? "已上传" : "点击上传" }}
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="档案收集:" prop="FM_Menu_AliasCollect">
              <el-input v-model="formData.FM_Menu_AliasCollect"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="档案收集代号:" prop="FM_Code_Collect">
              <el-input v-model="formData.FM_Code_Collect"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="档案整理:" prop="FM_Menu_AliasArrangement">
              <el-input v-model="formData.FM_Menu_AliasArrangement"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="档案整理代号:" prop="FM_Code_Arrangement">
              <el-input v-model="formData.FM_Code_Arrangement"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="档案保存:" prop="FM_Menu_AliasStorage">
              <el-input v-model="formData.FM_Menu_AliasStorage"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="档案保存代号:" prop="FM_Code_Storage">
              <el-input v-model="formData.FM_Code_Storage"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="档案利用:" prop="FM_Menu_AliasUtilization">
              <el-input v-model="formData.FM_Menu_AliasUtilization"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="档案利用代号:" prop="FM_Code_Utilization">
              <el-input v-model="formData.FM_Code_Utilization"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="备注:" prop="FM_Remark">
              <el-input v-model="formData.FM_Remark" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="闭合图片:" prop="FM_Icon1">
              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="FMOnChange">
                <img v-if="formData.FM_Icon1" :src="formData.FM_Icon1" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="展开图片:" prop="FM_Icon2">
              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="FMOnChange2">
                <img v-if="formData.FM_Icon2" :src="formData.FM_Icon2" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label-width="130px" label="启用档案收集档号:" prop="FM_Enable_Rule_Collect">
              <el-checkbox v-model="formData.FM_Enable_Rule_Collect" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="130px" label="启用档案整理档号:" prop="FM_Enable_Rule_Arrangement">
              <el-checkbox v-model="formData.FM_Enable_Rule_Arrangement" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="130px" label="启用档案保存档号:" prop="FM_Enable_Rule_Storage">
              <el-checkbox v-model="formData.FM_Enable_Rule_Storage" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="130px" label="启用档案利用档号:" prop="FM_Enable_Rule_Utilization">
              <el-checkbox v-model="formData.FM_Enable_Rule_Utilization" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label-width="130px" label="启用部门借阅:">
              <el-checkbox v-model="formData.FM_Enable_DeptBorrow" />
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="启用部门借阅:" prop="FM_Enable_DeptBorrow">
              <el-checkbox v-model="formData.FM_Enable_DeptBorrow" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="启用加/验签:" prop="FM_Enable_Signature">
              <el-checkbox v-model="formData.FM_Enable_Signature" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="启用四性检测:" prop="FM_Enable_FourDetection">
              <el-checkbox v-model="formData.FM_Enable_FourDetection" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="智能分类:" prop="FM_Enable_AIClassification">
              <el-checkbox v-model="formData.FM_Enable_AIClassification" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogSetting2.visible = false">取消</el-button>
          <el-button type="primary" @click="handle2"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 上传文件 -->
    <input ref="uploadFile" type="file" @change="uploadZipFile" style="display: none" />
    <input type="file" ref="fileInput" accept="application/pdf" style="display: none" @change="handleFileChange" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import Ztree from "@/components/ztree/Ztree.vue";
import type { FormInstance, FormRules } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { transTree, fileToBase64 } from "@/utils/util";
import { getFondsList, getClassList, getClassID } from "./fonds";
import { Splitpanes, Pane } from "splitpanes";
import { uploadImg } from "@/api/modules/upload";
import "splitpanes/dist/splitpanes.css";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();
// 全宗按钮状态
const FondsBtnStatus = ref([false, true, true]);
// 门类关联按钮状态
const relevanceStatus = ref(true);
// 归档方式按钮状态
const FMBtnStatus = ref([true, true, true]);
// 定义引用
const fileInput = ref<HTMLInputElement | null>(null);
const fileType = ref<string>(""); // 上传的文件类型
// 上传的文件名
const fileNames = reactive({
  orgName: "",
  mileName: "",
  fondName: ""
});
const fileUrls = reactive({
  Fonds_OrgHistory_Url: "",
  Fonds_Milestone_Url: "",
  Fonds_FondsIntro_Url: ""
});
// 全宗tree配置
const treeSetting = reactive({
  setting: {
    // ztree配置
    data: {
      simpleData: {
        enable: false,
        idKey: "Fonds_ID",
        pIdKey: "Fonds_Father"
      },
      key: {
        name: "Fonds_Name"
      }
    },
    view: {
      showIcon: false
    }
  },
  treeData: [] as any[],
  treeNode: {} as any
});
// 全宗弹出框
const dialogSetting3 = reactive({
  visible: false,
  title: ""
});
// 全宗表单绑定字段
const formData3 = reactive({
  fonds_Name: "",
  Fonds_ArchivalCode: "",
  fonds_Number: "",
  fonds_Father: null,
  fonds_Level: null,
  fonds_Order: null,
  fonds_Remark: "",
  fonds_Icon1: "",
  fonds_Icon2: ""
});
// 全宗表单规则
const rules3 = reactive<FormRules>({
  fonds_Name: [{ required: true, message: "请填写名称!", trigger: "blur" }],
  Fonds_ArchivalCode: [{ required: true, message: "请填写代码!", trigger: "blur" }],
  fonds_Order: [{ required: true, message: "请填写顺序号!", trigger: "blur" }],
  fonds_Level: [{ required: true, message: "请填写级别!", trigger: "blur" }]
});
// 全宗表单实例
const formRef3 = ref<FormInstance>();

// 门类表格配置
const tableSetting = reactive({
  columns: [
    { field: "Class_Order", title: "顺序号", sortable: true },
    { field: "Class_Code", title: "门类代码", sortable: true },
    { field: "Class_Name", title: "门类名称", sortable: true }
  ],
  data: [] as any
});
// 门类单击保存数据
const rowClickObj = ref();
// 门类关联弹出框
const dialogSetting = reactive({
  visible: false,
  title: "数据关联"
});
// 归档方式表格配置
const tableSetting2 = reactive({
  columns: [
    { field: "FM_Index", title: "顺序号", sortable: true },
    { field: "FM_OCName", title: "中文名", sortable: true },
    { field: "FM_OEName", title: "英文名", sortable: true },
    { field: "FM_Remark", title: "备注", sortable: true }
  ],
  data: []
});
// 归档方式单击保存数据
const rowClickObj2 = ref();
// 归档方式表单绑定字段
const formData = ref({
  FM_Index: 0,
  FM_OEName: "",
  FM_OCName: "",
  FM_Menu_AliasCollect: "",
  FM_Menu_AliasArrangement: "",
  FM_Menu_AliasStorage: "",
  FM_Menu_AliasUtilization: "",
  FM_Code_Collect: "",
  FM_Code_Arrangement: "",
  FM_Code_Storage: "",
  FM_Code_Utilization: "",
  FM_Enable_Rule_Collect: false,
  FM_Enable_Rule_Arrangement: false,
  FM_Enable_Rule_Storage: false,
  FM_Enable_Rule_Utilization: false,
  FM_Enable_DeptBorrow: false,
  FM_Enable_Signature: false,
  FM_Enable_FourDetection: false,
  FM_Enable_AIClassification: false,
  FM_Remark: "",
  FM_Icon1: "",
  FM_Icon2: ""
});
// 归档方式表单规则
const rules = reactive<FormRules>({
  FM_OCName: [{ required: true, message: "请填写中文名称!", trigger: "blur" }],
  FM_OEName: [{ required: true, message: "请填写英文名称!", trigger: "blur" }]
});
// 归档方式表单实例
const formRef = ref<FormInstance>();
// 上传地址
const uploadPath = ref("");
// 归档方式弹出框
const dialogSetting2 = reactive({
  visible: false,
  title: ""
});
// 数据关联表格配置
const tableSetting3 = reactive({
  columns: [
    { type: "checkbox", width: "60" },
    { field: "Class_Order", title: "顺序号", sortable: true },
    { field: "Class_Code", title: "门类代码", sortable: true },
    { field: "Class_Name", title: "门类名称", sortable: true }
  ],
  data: [],
  selectData: []
});
// 获取上传文件组件实例
const uploadFile = ref();
// 归档关联FC_ID
const fC_ID = ref("");
// 图片前缀
const imgStr = ref("data:image/jpeg;base64,");
// 点击图片时触发文件选择框
const triggerFileSelect = (type: string) => {
  fileType.value = type;
  fileInput.value!.click();
};
// 获取全宗数据
const getFondsData = async () => {
  const res = await getFondsList();
  treeSetting.treeData = transTree(res, "Fonds_ID", "Fonds_Father");
};
// 树节点点击事件
const onClick = (treeNode: any) => {
  treeSetting.treeNode = treeNode;
  relevanceStatus.value = false;
  FondsBtnStatus.value[1] = false;
  FondsBtnStatus.value[2] = false;
  getClassData();
};
// 全宗新增
const FondsAdd = () => {
  dialogSetting3.visible = true;
  dialogSetting3.title = "新增";
  formRef3.value?.resetFields();
};
// 全宗编辑
const FondsEdit = () => {
  dialogSetting3.visible = true;
  dialogSetting3.title = "修改";
  formData3.Fonds_ArchivalCode = treeSetting.treeNode.Fonds_ArchivalCode;
  formData3.fonds_Father = treeSetting.treeNode.Fonds_Father;
  formData3.fonds_Level = treeSetting.treeNode.Fonds_Level;
  formData3.fonds_Name = treeSetting.treeNode.Fonds_Name;
  formData3.fonds_Order = treeSetting.treeNode.Fonds_Order;
  formData3.fonds_Remark = treeSetting.treeNode.Fonds_Remark;
  formData3.fonds_Icon1 = imgStr.value + treeSetting.treeNode.Fonds_Icon1;
  formData3.fonds_Icon2 = imgStr.value + treeSetting.treeNode.Fonds_Icon2;
  formData3.fonds_Number = treeSetting.treeNode.Fonds_Number;
};
// 全宗删除
const FondsDel = () => {
  proxy.$messageBox
    .confirm("确定删除该数据？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$vueAxios.post("Master_Base_Fonds/Delete", [treeSetting.treeNode.Fonds_ID]).then((res: any) => {
        if (res.Mark) {
          getFondsData();
          proxy.$message.success("删除成功");
        } else {
          proxy.$message.error("删除失败");
        }
      });
    })
    .catch(err => {
      proxy.$message("取消删除");
    });
};
// 全宗按钮确认事件
const handle3 = () => {
  formRef3.value?.validate(isValid => {
    if (isValid) {
      if (dialogSetting3.title === "新增") {
        proxy.$vueAxios
          .post("Master_Base_Fonds", {
            fonds_ID: proxy.$global.createID(),
            fonds_Name: formData3.fonds_Name,
            fonds_Father: formData3.fonds_Father,
            fonds_Level: formData3.fonds_Level,
            fonds_ArchivalCode: formData3.Fonds_ArchivalCode,
            fonds_Order: formData3.fonds_Order,
            fonds_Remark: formData3.fonds_Remark,
            fonds_Number: formData3.fonds_Number,
            fonds_Icon1: formData3.fonds_Icon1.split(",")[1],
            fonds_Icon2: formData3.fonds_Icon2.split(",")[1],
            fonds_Enable: true,
            fonds_IsExpanded: true
          })
          .then(() => {
            dialogSetting3.visible = false;
            getFondsData();
          });
      } else {
        proxy.$vueAxios
          .put("Master_Base_Fonds", {
            fonds_ID: treeSetting.treeNode.Fonds_ID,
            fonds_Name: formData3.fonds_Name,
            fonds_Father: formData3.fonds_Father,
            fonds_Level: formData3.fonds_Level,
            fonds_ArchivalCode: formData3.Fonds_ArchivalCode,
            fonds_Order: formData3.fonds_Order,
            fonds_Remark: formData3.fonds_Remark,
            fonds_Number: formData3.fonds_Number,
            fonds_Icon1: formData3.fonds_Icon1.split(",")[1],
            fonds_Icon2: formData3.fonds_Icon2.split(",")[1],
            fonds_Enable: true,
            fonds_IsExpanded: true,
            ...fileUrls
          })
          .then(() => {
            dialogSetting3.visible = false;
            getFondsData();
          });
      }
    }
  });
};
// 获取关联门类数据
const getClassData = async () => {
  const res = await getClassList(treeSetting.treeNode.Fonds_ID);
  tableSetting.data = res.List;
};
// 关联门类数据表格单击
const rowClick = ({ row }: any) => {
  rowClickObj.value = row;
  FMBtnStatus.value[0] = false;
  getFMData();
};
// 门类数据勾选事件
const onSelectChange = (val: any) => {
  tableSetting3.selectData = val;
};
// 门类关联按钮点击事件
const relevance = () => {
  dialogSetting.visible = true;
  proxy.$vueAxios.get("Master_Base_Class/Get", { order: "Class_Order asc" }).then((res: any) => {
    res.List.forEach((item: any) => {
      if (tableSetting.data.map((v: any) => v.Class_ID).includes(item.Class_ID)) {
        item.checked = true;
      } else {
        item.checked = false;
      }
    });
    tableSetting3.data = res.List;
  });
};
// 比较函数
const compare = (beforeArr: any[], afterArr: any[]) => {
  let resObj = {
    add: [] as any[],
    del: [] as any[]
  };
  let cenObj = {} as any;
  // 把beforeArr数组去重放入cenObj
  for (let i = 0; i < beforeArr.length; i++) {
    cenObj[beforeArr[i]] = beforeArr[i];
  }
  // 遍历afterArr，查看其元素是否在cenObj中
  for (let j = 0; j < afterArr.length; j++) {
    if (!cenObj[afterArr[j]]) {
      resObj.add.push(afterArr[j]);
    } else {
      delete cenObj[afterArr[j]];
    }
  }
  for (let k in cenObj) {
    resObj.del.push(k);
  }
  return resObj;
};
// 数据关联弹框确认事件
const handle = async () => {
  let param = [] as any;
  const final = compare(
    tableSetting.data.map((v: any) => v.Class_ID),
    tableSetting3.selectData.map((v: any) => v.Class_ID)
  );
  // 新增关联关系
  if (final.add && final.add.length > 0) {
    final.add.forEach(item => {
      let FCID = proxy.$global.createID(); // 主键
      let tempObj = { fC_ID: FCID, fonds_ID: treeSetting.treeNode.Fonds_ID, class_ID: item };
      param.push(tempObj);
    });
    await proxy.$vueAxios.post("Master_Base_Fonds_Class/AddList", param);
    getClassData();
  }
  // 删除关联关系,(需要先判断该归档方式下是否有数据,防止数据丢失)
  if (final.del && final.del.length > 0) {
    const tempObj = {
      columnName: "Class_ID",
      ids: [] as any[]
    };
    final.del.forEach(item => {
      tempObj.ids.push(item);
    });
    param = tempObj;
    await proxy.$vueAxios.post("Master_Base_Fonds_Class/DeleteByColumnName", param);
    getClassData();
  }
  dialogSetting.visible = false;
};
// 获取归档方式数据
const getFMData = () => {
  proxy.$vueAxios
    .post(
      "Master_Base_Fonds_Class/GetConditional",
      {
        order: "FC_ID asc",
        dtoList: [
          {
            fieldName: "Fonds_ID",
            fieldValue: treeSetting.treeNode.Fonds_ID,
            conditionalType: 0
          },
          {
            fieldName: "Class_ID",
            fieldValue: rowClickObj.value.Class_ID,
            conditionalType: 0
          }
        ]
      },
      {
        noLoading: true
      }
    )
    .then((res: any) => {
      fC_ID.value = res.List[0].FC_ID;
      proxy.$vueAxios
        .post("Master_Base_FormModel/GetConditional", {
          order: "FM_Index asc",
          dtoList: [
            {
              fieldName: "FC_ID",
              fieldValue: res.List.map((v: any) => v.FC_ID).join(","),
              conditionalType: 0
            }
          ]
        })
        .then((res2: any) => {
          tableSetting2.data = res2.List;
        });
    });
};
// 归档方式表格单击
const rowClick2 = ({ row }: any) => {
  rowClickObj2.value = row;
  FMBtnStatus.value[1] = false;
  FMBtnStatus.value[2] = false;
};
// 归档新增
const FMAdd = () => {
  dialogSetting2.visible = true;
  dialogSetting2.title = "新增";
  formRef.value?.resetFields();
};
// 归档修改
const FMEdit = () => {
  dialogSetting2.visible = true;
  dialogSetting2.title = "修改";
  nextTick(() => {
    formData.value = Object.assign(
      {},
      {
        ...rowClickObj2.value,
        FM_Icon1: imgStr.value + rowClickObj2.value.FM_Icon1,
        FM_Icon2: imgStr.value + rowClickObj2.value.FM_Icon2
      }
    );
  });
};
// 归档删除
const FMDel = () => {
  proxy.$messageBox
    .confirm("确定删除该数据？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$vueAxios.post("Master_Base_FormModel/Delete", [rowClickObj2.value.FM_ID]).then((res: any) => {
        if (res.Mark) {
          proxy.$message.success("删除成功");
          getFMData();
        } else {
          proxy.$message.error("删除失败");
        }
      });
    })
    .catch(err => {
      proxy.$message("取消删除");
    });
};
// 点击弹出上传文件框
const uploadClick = () => {
  uploadFile.value.click();
};
// 上传按钮点击事件
const uploadZipFile = async () => {
  const files = uploadFile.value.files;
  const btey = 1024 * 1024 * 10; // 分片大小为10m
  const totalPieces = Math.ceil(files[0].size / btey);
  const type = files[0].type.includes("video") || files[0].type.includes("audio");
  for (let i = 0; i < totalPieces; i++) {
    const fileData = new FormData();
    fileData.append("file", files[0]);
    fileData.append("AI_ID", proxy.$global.createID());
    fileData.append("PieceTotal", totalPieces as any);
    fileData.append("PieceNow", (i + 1) as any);
    fileData.append("AI_Name", files[0].name);
    fileData.append("AI_FileDateTime", new Date() as any);
    fileData.append("AI_Size", files[0].size);
    fileData.append("AI_Index", "0");
    fileData.append("FM_ID", rowClickObj2.value.FM_ID);
    fileData.append("AI_IsSpecial", (type ? true : false) as any);
    await proxy.$vueAxios.post("MasterBaseAllInfos/Upload/Piece", fileData, { noLoading: true }).then((res: any) => {
      console.log("上传成功!", res);
    });
    const percent = Math.ceil(((i + 1) / totalPieces) * 100);
    proxy.$showLoading({ tip: `文件上传中...(${percent}%)` });
  }
  proxy.$hideLoading();
};
// 新增修改确认事件
const handle2 = () => {
  formRef.value!.validate((isValid: boolean) => {
    if (isValid) {
      if (dialogSetting2.title === "新增") {
        proxy.$vueAxios
          .post("Master_Base_FormModel", {
            ...formData.value,
            FM_ID: proxy.$global.createID(),
            FC_ID: fC_ID.value,
            Fonds_ID: treeSetting.treeNode.Fonds_ID,
            FM_Icon1: formData.value.FM_Icon1.split(",")[1],
            FM_Icon2: formData.value.FM_Icon2.split(",")[1]
          })
          .then((res: any) => {
            if (res.Mark) {
              dialogSetting2.visible = false;
              getFMData();
            }
          });
      } else {
        proxy.$vueAxios
          .put("Master_Base_FormModel", {
            ...formData.value,
            FM_ID: rowClickObj2.value.FM_ID,
            FC_ID: rowClickObj2.value.FC_ID,
            Fonds_ID: treeSetting.treeNode.Fonds_ID,
            FM_ClassSchemePath: "",
            FM_Icon1: formData.value.FM_Icon1.split(",")[1],
            FM_Icon2: formData.value.FM_Icon2.split(",")[1]
          })
          .then((res: any) => {
            if (res.Mark) {
              dialogSetting2.visible = false;
              getFMData();
            }
          });
      }
    }
  });
};
// 文件选择后的处理
const handleFileChange = (event: Event) => {
  // 断言 target 为 HTMLInputElement 类型，并确保 files 存在
  const input = event.target as HTMLInputElement;
  const file = input.files?.[0];

  if (file) {
    if (file) {
      console.log("file------", file);
      let formData = new FormData();
      formData.append("file", file);
      formData.append("folderpath", "abc");
      uploadImg(formData).then(res => {
        console.log("上传成功", res);
        if (res.Mark && res.Model) {
          switch (fileType.value) {
            case "org":
              fileNames.orgName = file.name;
              fileUrls.Fonds_OrgHistory_Url = res.Model;
              break;
            case "mile":
              fileNames.mileName = file.name;
              fileUrls.Fonds_Milestone_Url = res.Model;
              break;
            case "fond":
              fileNames.fondName = file.name;
              fileUrls.Fonds_FondsIntro_Url = res.Model;
              break;

            default:
              break;
          }
          proxy.$message.success("上传成功");
        } else {
          proxy.$message.error("上传失败");
        }
      });
      // 清空文件输入框的值
      input.value = "";
    } else {
      console.warn("No file selected or file input is empty");
    }
    // 清空文件输入框的值
    input.value = "";
  } else {
    console.warn("No file selected or file input is empty");
  }
};
// 文件上传
const onChange = (file: any) => {
  fileToBase64(file.raw, (res: any) => {
    formData3.fonds_Icon1 = res;
  });
};
const onChange2 = (file: any) => {
  fileToBase64(file.raw, (res: any) => {
    formData3.fonds_Icon2 = res;
  });
};
// FM文件上传
const FMOnChange = (file: any) => {
  fileToBase64(file.raw, (res: any) => {
    formData.value.FM_Icon1 = res;
  });
};
const FMOnChange2 = (file: any) => {
  fileToBase64(file.raw, (res: any) => {
    formData.value.FM_Icon2 = res;
  });
};
onMounted(() => {
  getFondsData();
});
</script>

<style scoped lang="scss">
.fondsManage {
  height: 100%;
  .avatar-uploader {
    width: 50px;
    height: 50px;
    :deep(.el-upload) {
      width: 100%;
      height: 100%;
      border: 1px dashed #cccccc;
      .avatar {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .upload-btn {
    text-align: center;
    .file-name {
      margin-top: 8px;
    }
  }
}
</style>
